<template>
  <div class="index-banner p-rel">
    <el-carousel
      :interval="5000"
      :height='bannerHeight>0?(bannerHeight+"px"):(bannerMinHeight+"px")'
    >
      <el-carousel-item
        v-for="(item,index) in bannerList"
        :key="index"
      >
        <a
              v-if="item.link!=''"
              target="view_window"
              :href="item.link"
        ><img
            class="banner-image"
            :src='item.bannerurl||item.url'
          >
        </a>
        <router-link :to='item.link' v-else>
          <img
            class="banner-image"
            :src='item.bannerurl||item.url'
          >
        </router-link>
      </el-carousel-item>
    </el-carousel>
    <!-- <login-win></login-win> -->
  </div>
</template>

<script>
import loginWin from "@/components/home/LoginWin";
export default {
  name: "index-banner",
  components: {
    loginWin
  },
  data() {
    return {
      //初始化banner，设置bannder默认高度和最小高度
      bannerHeight: 500,
      bannerMinHeight: 500,
      bannerList: [
        {bannerurl:require('@/assets/images/images/images/banner_01.png')},
        {bannerurl:require('@/assets/images/images/images/banner_02.png')},
        {bannerurl:require('@/assets/images/images/images/banner_03.png')},

      ]
    };
  },
  mounted() {
    this.getBanner();
    // window.onresize = () => {
    //   this.getBanner();
    // }; 
  },
  methods: {
    //调用banner图片的接口
    getBanner() {
      let img = null;
      // this.request(this.api.banner,{type:'web'}).then(res => {
      //   if (res.code == "0" && res.data) {
      //     img = new Image();
      //     img.src = res.data[0].banner;
      //     let width = window.innerWidth;
      //     width < 1440 && (width = 1440);
      //     // img.onload = () => {
      //     //   let r = width / img.width;
      //     //   let r=0.5;
      //     //   this.bannerHeight =
      //     //     img.height * r > this.bannerMinHeight
      //     //       ? img.height * r
      //     //       : this.bannerMinHeight;
      //     // };
      //     this.bannerList = res.data;
      //   }
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
.index-banner {
  @include minWidth;
  .banner-image {
    border: none;
    width: 100%;
    // height: 100%;
    height: 500px;
  }
}
</style>

